<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>大数据计算平台 - 数据分析</title>
  <meta name="description" content="">
  <meta name="keywords" content="index">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="icon" type="image/png" th:href="@{/assets/i/favicon.png}">
  <link rel="apple-touch-icon-precomposed" th:href="@{/assets/i/app-icon72x72@2x.png}">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <script th:src="@{/assets/js/echarts.min.js}"></script>
  <link rel="stylesheet" th:href="@{/assets/css/amazeui.min.css}"/>
  <link rel="stylesheet" th:href="@{/assets/css/amazeui.datatables.min.css}"/>
  <link rel="stylesheet" th:href="@{/assets/css/app.css}">
  <script th:src="@{/assets/js/jquery.min.js}"></script>

  <style type="text/css">
    .select {
      /* 鼠标滑上样式 */
      cursor: pointer;
    }
    .plus, .reduce {
      color: white;
      background-color: deepskyblue;
      font-weight: bold;
      /* border-radius的值等于height的一半 */
      border-radius: 12px;
      /* 声明为块级元素，以行内元素的方式排列 */
      display: inline-block;
      height: 24px;
      width: 24px;
      /* 垂直居中：line-height值等于height属性值 */
      line-height: 24px;
      /* 水平居中 */
      text-align: center;
    }
  </style>
</head>

<body data-type="widgets">
<script th:src="@{/assets/js/theme.js}"></script>

<div class="am-g tpl-g">
  <!-- 头部 -->
  <div th:include="header.html"></div>

  <!-- 风格切换 -->
  <div th:include="style.html"></div>

  <!-- 侧边导航栏 -->
  <div th:include="left-sidebar.html"></div>


  <!-- 内容区域 -->
  <div class="tpl-content-wrapper">
    <div class="row-content am-cf">
      <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
          <div class="widget am-cf">
            <div class="widget-head am-cf">
              <div class="widget-title  am-cf">数据流程列表</div>
            </div>

            <div class="widget-body  am-fr">
              <div class="am-u-sm-12 am-u-md-6 am-u-lg-9">
                <div class="am-form-group">
                  <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                      <button type="button" id="add-btn" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新建数据分析流程</button>
                      <!--<button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>-->
                      <!--<button type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 审核</button>-->
                      <!--<button type="button" class="am-btn am-btn-default am-btn-danger"><span class="am-icon-trash-o"></span> 删除</button>-->
                    </div>
                  </div>
                </div>
              </div>

              <div class="am-u-sm-12">
                <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                  <thead>
                  <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <!--<th>创建时间</th>-->
                    <th>状态</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody id="table-data">
                  <tr th:each="flow,iterStat : ${dataFlows}"
                      th:classappend="${iterStat.odd} ? 'gradeX' : 'even gradeC'"
                      th:attr="data-id=${flow.id}">
                    <td th:text="${flow.flowName}"></td>
                    <td th:text="${flow.flowType}"></td>
                    <td th:switch="${flow.flowStatus}">
                      <span th:case="Success"><a class="am-badge am-badge-success am-round">Success</a></span>
                      <span th:case="Fail"><a class="am-badge am-badge-danger am-round">Fail</a></span>
                      <span th:case="Running"><a class="am-badge am-badge-primary am-round">Running</a></span>
                      <span th:case="*"><span class="am-badge am-round" th:text="${flow.flowStatus}"></span></span>
                    </td>
                    <td>
                      <div class="tpl-table-black-operation">
                        <a href="javascript:;" th:attr="data-id=${flow.id}" approach="run">
                          <i class="am-icon-play-circle"></i> 运行</a>
                        <a href="javascript:;" th:attr="data-id=${flow.id},data-type=${flow.flowType}" approach="edit">
                          <i class="am-icon-pencil"></i> 编辑</a>
                        <a href="javascript:;" th:attr="data-id=${flow.id}" approach="preview">
                          <i class="am-icon-eye"></i> 预览结果</a>
                        <!--<a href="javascript:;" th:attr="data-id=${flow.id}" approach="view">-->
                          <!--<i class="am-icon-eye"></i> 可视化</a>-->
                        <a href="javascript:;" class="tpl-table-black-operation-del"
                           th:attr="data-id=${flow.id}" approach="delete">
                          <i class="am-icon-trash"></i> 删除</a>
                      </div>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>

              <!-- 分页 -->
              <div class="am-u-lg-12 am-cf" th:if="${pages.totalPage > 1}">
                <div class="am-fr">
                  <ul class="am-pagination tpl-pagination">
                    <li th:classappend="${pages.previous == 0} ? 'am-disabled'"><a href="/dataFlow/manager?p=1">«</a></li>
                    <li th:each="item : ${pages.getPages()}" th:classappend="${item == pages.pageNum} ? 'am-active am-disabled'"><a th:href="'/dataFlow/manager?p=' + ${item}" th:text="${item}"></a></li>
                    <li th:classappend="${pages.pageNum == pages.totalPage} ? 'am-disabled'"><a th:href="'/dataFlow/manager?p=' + ${pages.totalPage}">»</a></li>
                  </ul>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="modal-add-data">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">新建数据流程
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd" style="text-align: left">

      <form class="am-form tpl-form-line-form" id="form">
        <div class="am-form-group">
          <label class="am-u-sm-3 am-form-label">数据流程名称 <span class="tpl-form-line-small-title">Name</span></label>
          <div class="am-u-sm-9">
            <input type="text" name="dataFlowName" class="tpl-form-input" placeholder="请输入数据流程名称">
          </div>
        </div>

        <!-- 分析方式 -->
        <div class="am-form-group">
          <label class="am-u-sm-3 am-form-label">分析方式 <span class="tpl-form-line-small-title">Type</span></label>
          <div class="am-u-sm-9">
            <label class="am-radio-inline">
              <input type="radio" value="mr" name="mode"> MapReduce
            </label>
            <label class="am-radio-inline">
              <input type="radio" value="hql" name="mode"> Hive
            </label>
          </div>
        </div>

        <!-- 选择数据源（根据分析方式更新数据源） -->
        <div class="am-form-group">
          <label class="am-u-sm-3 am-form-label">数据源 <span class="tpl-form-line-small-title">Data</span></label>
          <div class="am-u-sm-9">
            <select data-am-selected="{searchBox: 1}" style="display: none;" name="sourceId">
            </select>
          </div>
        </div>

        <!-- MR算法 -->
        <div class="am-form-group" hidden id="add-mr-control">
          <label class="am-u-sm-3 am-form-label">MR算法 <span class="tpl-form-line-small-title">Algorithm</span></label>
          <div class="am-u-sm-9">
            <select data-am-selected="{}" style="display: none;" name="algorithm">
              <option value="wordcount">词频统计</option>
            </select>
          </div>
        </div>

        <!-- Hive指定聚合列，聚合方法 -->
        <div class="am-form-group" id="add-hive-column-control" hidden>
          <label class="am-u-sm-3 am-form-label">Hive聚合列 <span class="tpl-form-line-small-title">Aggregation</span></label>
          <div class="am-u-sm-9" id="hive-column">

            <div class="row am-form-group">
              <div class="am-u-sm-5">
                <select  name="columns"></select>
              </div>
              <div class="am-u-sm-5">
                <select name="aggregations">
                  <option value="count">计数</option>
                  <option value="sum">求和</option>
                  <option value="avg">平均</option>
                </select>
              </div>
              <div class="am-u-sm-2"><span class="select plus">+</span></div>
            </div>

            <div id="other-hive-columns" style="padding:0; margin:0;">

            </div>

          </div>
        </div>

        <!-- Hive指定分组列 -->
        <div class="am-form-group" hidden id="add-hive-group-control">
          <label class="am-u-sm-3 am-form-label">Hive分组列 <span class="tpl-form-line-small-title">Group</span></label>
          <div class="am-u-sm-9">
            <select multiple data-am-selected name="groups">
            </select>
          </div>
        </div>

        <div class="am-form-group">
          <div class="am-u-sm-9 am-u-sm-push-3">
            <button type="button" id="submit-btn-add" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>


<div id="hive-column-copy" hidden>
  <div class="row am-form-group">
    <div class="am-u-sm-5">
      <select name="columns"></select>
    </div>
    <div class="am-u-sm-5">
      <select name="aggregations">
        <option value="count">计数</option>
        <option value="sum">求和</option>
        <option value="avg">平均</option>
        <option value="max">最大值</option>
        <option value="min">最小值</option>
      </select>
    </div>
    <div class="am-u-sm-1"><span class="select plus">+</span></div>
    <div class="am-u-sm-1"><span class="select reduce">-</span></div>
  </div>
</div>

<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示消息</div>
    <div class="am-modal-bd">
      <span id="msg"></span>
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn">确定</span>
    </div>
  </div>
</div>

<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">数据流程管理</div>
    <div class="am-modal-bd">
      确定要删除这条记录吗？
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>

<!-- 预览数据模态框 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="modal-preview-data">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">预览数据
      <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
    </div>
    <div class="am-modal-bd">
      <div class="am-scrollable-horizontal ">
        <table width="100%" class="am-table am-table-compact am-text-nowrap tpl-table-black am-table-bordered " style="color: #838FA1">
          <!--<thead>-->
          <!--<tr>-->
          <!--<th style="text-align: center">数据内容</th>-->
          <!--</tr>-->
          <!--</thead>-->
          <tbody id="preview-table-body">
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<script th:src="@{/assets/js/amazeui.min.js}"></script>
<script th:src="@{/assets/js/amazeui.datatables.min.js}"></script>
<script th:src="@{/assets/js/dataTables.responsive.min.js}"></script>
<script th:src="@{/assets/js/app.js}"></script>
<script type="text/javascript">
  $(function () {
    var alertModel = $("#my-alert");
    var msgSpan = $("#msg");
    var modalPreview = $("#modal-preview-data");

    // 表格数据操作
    $("#table-data").on("click", "a[approach]", function () {
      var approach = $(this)[0].getAttribute("approach");
      var id = $(this)[0].getAttribute("data-id");
      console.log(approach + " => " + id);

      switch(approach) {
        case "run":
          $.ajax({
            url: "/dataFlow/start",
            method: "post",
            data: {
              dataFlowId: id
            },
            success: function (res) {
              if(res.code === 1001) {
                showAlert("启动成功");
              } else {
                showAlert(res.msg);
              }
            }
          });
          break;
        case "edit":
          showAlert("暂时不支持编辑");
          break;
        case "preview":
          $.ajax({
            url: "/dataFlow/preview",
            method: "post",
            data: {
              dataFlowId: id
            },
            success: function(res) {
              if(res.code === 1001) {
                console.log(res.data);
                var tabHtml = "";
                for(var i=0; i<res.data.length; i++) {
                  tabHtml += "<tr><td>"+res.data[i]+"</td></tr>";
                }
                $("#preview-table-body").html(tabHtml);
                modalPreview.modal({
                  closeViaDimmer: false,
                  width: 800
                });
              } else{
                showAlert(res.msg);
              }
            }
          });
          break;
        // case "view":
        //   showAlert("让我缓缓，别急");
        //   break;
        case "delete":
          $('#my-confirm').modal({
            relatedTarget: this,
            onConfirm: function(options) {
              // 发送删除请求
              $.ajax({
                url: "/dataFlow/delete",
                method: "post",
                data: {
                  dataFlowId: id
                },
                success: function (res) {
                  if(res.code === 1001) {
                    showAlert("删除成功");
                    $("tr[data-id=" + id + "]")[0].remove();
                  } else {
                    showAlert(res.msg);
                  }
                }
              });
            },
            // closeOnConfirm: false,
            onCancel: function() {
              console.log("取消了")
            }
          });
          break;
      }
    });

    // 新建数据流程
    $("#add-btn").click(function () {
      $("#modal-add-data").modal({
        width: 800,
        closeViaDimmer: false
      });
    });
    // 选择分析方式
    var mode = "";
    var mrDiv = $("#add-mr-control")[0];
    var hiveColumns = $("#add-hive-column-control")[0];
    var hiveGroups = $("#add-hive-group-control")[0];
    $("input[name='mode']").change(function () {
      mode = $(this)[0].value;
      changeForm();
    });
    function changeForm() {
      if(mode === "mr") {
        hiveColumns.hidden = true;
        hiveGroups.hidden = true;
        mrDiv.hidden = false;
        getDataSource("mr");
      } else {
        hiveColumns.hidden = false;
        hiveGroups.hidden = false;
        mrDiv.hidden = true;
        getDataSource("hql");
      }
    }
    function getDataSource(type) {
      $.ajax({
        url: "/dataSource/selectAllByType",
        method: "post",
        data: {
          type: type
        },
        success: function (res) {
          if(res.code === 1001) {
            var arr = res.data;
            var selectTmp = $("select[name='sourceId']");
            selectTmp.html("");
            for(var i=0; i<arr.length; i++) {
              var item = "<option value='"+arr[i].id+"'>"+arr[i].sourceName+"</option>"
              selectTmp.append(item);
            }
          } else{
            showAlert(res.msg);
          }
        }
      });
    }
    $("select[name='sourceId']").change(function () {
      var sourceId = $(this)[0].value;
      if(mode === "hql") {
        $.ajax({
          url: "/dataSource/selectOneById",
          method: "post",
          data: {
            sourceId: sourceId
          },
          success: function (res) {
            if(res.code === 1001) {
              var tableColumn = res.data.tableColumn;
              var cols = tableColumn.split(",");
              $("select[name='columns']").html("");
              $("select[name='groups']").html("");
              for(i=0; i<cols.length; i++) {
                $("select[name='columns']").append("<option value='"+cols[i]+"'>"+cols[i]+"</option>>")
                $("select[name='groups']").append("<option value='"+cols[i]+"'>"+cols[i]+"</option>>")
              }
            } else {
              showAlert(res.msg);
            }
          }
        });
      }
    });
    $("#hive-column").on("click", ".plus", function () {
      $("#other-hive-columns").append($("#hive-column-copy").html());
    });
    $("#hive-column").on("click", ".reduce", function () {
      $(this).parent().parent().remove();
    });
    $("#submit-btn-add").click(function () {
      var url = "/dataFlow/createMR";
      if(mode === "hql") {
        url = "createHive";
      }
      $.ajax({
        url: url,
        method: "post",
        data: $("#form").serialize(),
        success: function (res) {
          if(res.code === 1001) {
            showAlert("添加成功");
            $("#modal-add-data").modal('close');
          } else {
            showAlert(res.msg);
          }
        }
      });
    });

    function showAlert(msg) {
      msgSpan.html(msg);
      alertModel.modal();
    }
  });
</script>

</body>

</html>